<template>
    <div class="zuixin">
        <div class="top">
            <img src="../pages/img/z1.png">
        </div>
        <div class="main">
            <ul>
                <li>
                    <img src="../pages/img/z2.webp" alt="">
                    <h2>国风禅意背景图</h2>
                    <p>阅读<span>5496</span></p>
                </li>
                <li>
                    <img src="../pages/img/z3.webp" alt="">
                    <h2>秋日落叶</h2>
                    <p>阅读<span>2926</span></p>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../pages/img/z5.webp" alt="">
                    <h2>可爱正能量国庆</h2>
                    <p>阅读<span>1.2万</span></p>
                </li>
                <li>
                    <img src="../pages/img/z6.webp" alt="">
                    <h2>二十四节气秋分</h2>
                    <p>阅读<span>1万</span></p>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../pages/img/z8.webp" alt="">
                    <h2>超治愈手绘</h2>
                    <p>阅读<span>2.6万</span></p>
                </li>
                <li>
                    <img src="../pages/img/z7.webp" alt="">
                    <h2>超温柔ins风</h2>
                    <p>阅读<span>2.5万</span></p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../../common/less/varible.less';

.zuixin {
    font-family: @fontfamily;
    overflow: hidden;

    .top {
        height: 200px;
        width: calc(100% - 30px);
        margin: 0 auto;

        img {
            width: 100%;
        }
    }

    .main {
        width: calc(100% - 20px);
        margin: 0 auto;

        ul {
            margin-top: 10px;
            height: 145px;
            width: 100%;
            display: flex;
            flex-grow: 1;
            justify-content: space-around;
            li {
                width: 48%;

                img {
                    width: 100%;
                }
                h2{
                    color: #787878;
                    margin-top: 5px;
                }
                p{
                    margin-top: 2px;
                    color: #787878;
                    span{
                        margin-left: 5px;
                    }
                }
            }
        }
    }
}
</style>